<template>
	<view class="content">
		<u-grid :col="3">
			<u-grid-item hover-class="catlist-hover" v-for="(item,index) in catlist" :key="index" @click="listpros"
				:index="item.id">
				<view class="grid-text">{{item.title}}</view>
			</u-grid-item>
		</u-grid>
		<view class="prolist">
			<view class="list" hover-class="uni-list-cell-hover" v-for="(item,index) in prolist" :key="index"
				@tap="showpros" :data-id="item.id">
				<u-image width="100%" mode="widthFix" :src="item.pic" :lazy-load="true" class="img"></u-image>
				<view class="title">{{item.title}}</view>
			</view>
		</view>
		<u-loadmore :status="loadStatus" margin-top="20" margin-bottom="30"/>
		<home-footer></home-footer>
	</view>
</template>

<script>
	import homeFooter from '@/pages/tabbar/tabbar.vue';
	export default {
		components: {
			homeFooter
		},
		data() {
			return {
				prolist: '',
				catlist: '',
				list: 12,
				page: 1,
				pages:'',
				loadStatus: 'loadmore',
				catid:''
			}
		},
		onReachBottom() {
			
			
			if (this.list >= this.pages) return;
			this.loadStatus = 'loading';
			this.list += 12;
			this.getOrderList();
			setTimeout(() => {
				if (this.list >= this.pages) this.loadStatus = 'nomore';
				else this.loadStatus = 'loading';
			}, 2000);
		},
		onLoad: function(e) {
			if (e.show==undefined) {
				var catid = this.$globals.product_id;
			} else{
				var catid = e.show
			};
			this.catid = catid;
			console.log(catid);
			// 产品列表
			this.getOrderList();
			this.$u.api.getList({
				cid: this.catid
			}).then(res => {
				this.pages = res.data.length;
				console.log(res.data.length);
			});
			// 获取分类
			this.$u.api.getCatlist({
				cid: this.$globals.product_id,
			}).then(res => {
				this.catlist = res.data;
			});
			// 获取栏目名称设置页面标题
			this.$u.api.getType({
				typeid: catid
			}).then(res => {
				// #ifdef  MP-BAIDU
				// 百度小程序TDK配置
				swan.setPageInfo({
					title: res.data.seo_title,
					keywords: res.data.seo_keywords,
					description: res.data.seo_description,
					image: res.data.pic,
				});
				// #endif
				uni.setNavigationBarTitle({
					title: res.data.title,
				})
			});
		},
		methods: {
			getOrderList() {
				this.$u.api.getList({
					cid: this.catid,
					limit: this.list,
					orderby: 'id asc'
				}).then(res => {
					this.prolist = res.data;
				});
			},
			showpros(e) {
				var prosid = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../info/pro_show?show=' + prosid
				});
			},
			listpros(index) {
				console.log(index);
				uni.navigateTo({
					url: '../list/pro_list?show=' + index
				});
				
			},

		},
	}
</script>

<style lang="scss">
	.catlist {
		width: 100%;
		margin: 25upx auto;
		border-radius: 3px;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #FFFFFF;

		.list {
			width: 33.333%;
			text-align: center;
			line-height: 80upx;
		}
	}
</style>
